<template>
  <view class="select-tab" @tap="showMenuClick">
    <div class="tab-name">{{ activeText || name }}</div>
    <uni-icons :type="arrowFlg ? 'up' : 'down'" size="15"></uni-icons>
  </view>
  <scroll-view
    class="select-popup"
    :class="arrowFlg ? 'popup-act' : ''"
    scroll-y
    v-if="arrowFlg"
  >
    <view class="popup-content">
      <view
        class="select-popup-item"
        v-for="(item, index) in menuList"
        :key="index"
        @tap="onSortTap(index, item.text)"
      >
        <text
          class="popup-name"
          :class="menuIndex == index ? 'popup-active' : ''"
          >{{ item.text }}</text
        >
        <uni-icons
          v-if="menuIndex == index"
          type="checkmarkempty"
          color="#5590F6"
        ></uni-icons>
      </view>
    </view>
  </scroll-view>
</template>
<script setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  active: {
    type: String,
  },
  menuList: {
    type: Array,
    default: [],
  },
});
const arrowFlg = ref(false);
const menuIndex = ref(0);
const activeText = ref("");

function onSortTap(ind, text) {
  menuIndex.value = ind;
  arrowFlg.value = false;
  activeText.value = text;
}
function showMenuClick() {
  arrowFlg.value = !arrowFlg.value;
}
function onTouchstart(e) {
  console.log("触摸开始", e);
}
onMounted(() => {
  activeText.value = props.active;
});
</script>
<style lang="less" scoped>
.select-tab {
  background-color: @color-font;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
  padding: 30rpx;
  display: flex;
  align-items: center;
  .tab-name {
    font-size: @font-size-23;
    font-family: "ali-m";
    font-weight: 500;
    color: @color-black;
    margin-right: 20rpx;
    width: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.select-popup {
  position: absolute;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.3);
  // height: 100%;
  width: 100%;
  left: 0px;
  overflow: hidden;
  &.popup-act {
    height: 100vh;
    margin-top: var(--window-top);
  }
  .popup-content {
    position: absolute;
    z-index: 1000000;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 1rpx 2rpx 38rpx 0rpx rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .select-popup-item {
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
    padding: 25rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f7f8fd;
    .popup-name {
      font-size: @font-size-23;
      font-family: "ali-m";
      font-weight: 500;
      color: @color-black;
      &.popup-active {
        color: @color-blue;
      }
    }
  }
}
</style>